<template>
  <view class="hy_model">
    <view class="mask">
      <view class="hangye_model">
        <view class="header">
          <view class="left">
            <view class="first"
                  @click="toggle(el.id)"
                  :class="{active:pid==el.id}"
                  v-for="el in hangyeFirst"
                  :key="el.id">{{el.name}} </view>
          </view>
          <view class="right">
            <view class="second"
                  :class="{active:currentList.indexOf(el.id)!=-1}"
                  v-for="el in hangyeSecond"
                  @click="getid(el.id)"
                  :key="el.id">{{el.name}}</view>
          </view>
        </view>
        <view class="bottom">
          <view class="l_btn"
                @click="currentList=[]">重置</view>
          <view class="r_btn"
                @click="btn">确定</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    queryParms: Object
  },
  data() {
    return {
      hangyeFirst: [],
      hangyeSecond: [],
      pid: '',
      type: 'second',
      currentList: []
    }
  },
  mounted() {
    this.getFirst()
  },
  methods: {
    toggle(e) {
      this.pid = e
      if (!e) {
        this.type = 'second'
      } else {
        this.type = 2
      }
      this.getSecond()
    },
    async getFirst() {
      let { data } = await this.$http.post('/Classification/index', { type: this.type })
      this.hangyeFirst = [{ id: 0, name: '全部' }, ...data.data]
      this.getSecond()
    },
    async getSecond() {
      let { data } = await this.$http.post('/Classification/index', { type: this.type, pid: this.pid })
      this.hangyeSecond = data.data
    },
    async getid(item) {
      // if (this.currentList.indexOf(item) != -1)
      if (this.currentList.indexOf(item) == -1) {
        this.currentList.push(item)
      } else {
        this.currentList.splice(this.currentList.indexOf(item), 1)
      }
    },
    btn() {
      this.$emit('changeArr', this.currentList)
    }
  }
}
</script>

<style lang="scss">
.hy_model {
  .mask {
    position: fixed;
    top: 190rpx;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 99;

    /* 行业分类的model */
    .hangye_model {
      width: 750rpx;
      position: absolute;
      top: 0rpx;
      z-index: 999;

      .header {
        height: 500rpx;
        .left {
          width: 200rpx;
          height: 500rpx;
          background-color: #dddddd;
          float: left;

          .first {
            width: 200rpx;
            height: 100rpx;
            line-height: 100rpx;
            text-align: center;
            overflow-y: auto;
          }
          .active {
            background-color: #fff;
            position: relative;
            &::before {
              content: '';
              position: absolute;
              width: 4rpx;
              height: 20rpx;
              background-color: #ffdd47;
              left: 0;
              top: 50%;
              transform: translateY(-50%);
            }
          }
        }

        .right {
          width: 550rpx;
          height: 500rpx;
          background-color: #fff;
          float: left;
          overflow-y: auto;

          &::-webkit-scrollbar {
            display: none;
          }

          .second {
            width: 550rpx;
            height: 100rpx;
            line-height: 100rpx;
            padding: 0 30rpx;
            box-sizing: border-box;
          }
          .active {
            font-weight: bold;
            display: flex;
            justify-content: space-between;
            align-items: center;
            &::after {
              content: '';
              width: 26rpx;
              height: 18rpx;
              background: url('/static/img/钩选.png') no-repeat 0 0 / 100% 100%;
            }
          }
        }
      }
      .bottom {
        display: flex;
        .l_btn,
        .r_btn {
          width: 375rpx;
          height: 88rpx;
          background-color: #fff;
          text-align: center;
          line-height: 88rpx;
        }
        .r_btn {
          background-color: #ffdd47;
        }
      }
    }
  }
}
</style>